<!doctype html>
<html>

<head>
    <title>Socket.IO chat</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        ul {
            list-style-type: none;
        }

        html,
        body {
            height: auto;
            font: 13px Helvetica, Arial;
        }

        /* 滚动条优化 start */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: #f6f6f6;
            border-radius: 2px;
        }

        ::-webkit-scrollbar-thumb {
            background: skyblue;
            border-radius: 2px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #747474;
        }

        ::-webkit-scrollbar-corner {
            background: #f6f6f6;
        }

        /* 滚动条优化 end */
        .flex {
            display: flex;
        }

        .container {
            width: 100%;
            height: 100vh;
        }

        #anonymousList {
            position: relative;
            width: 200px;
            border: 2px solid;
        }

        #anonymousList #concatenation {
            overflow-y: auto;
            height: calc(100vh - 30px);
        }

        #anonymousList #concatenation li {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 10px;
        }

        #region {
            flex: 1;
            position: relative;
        }

        form {
            background: #000;
            padding: 3px;
            position: absolute;
            bottom: 0;
            width: 100%;
        }

        form .expression {
            width: 38px;
            margin-right: 6px;
            cursor: pointer;
        }

        form input {
            border: 0;
            padding: 10px;
            flex: 1;
            margin-right: .5%;
        }

        form button {
            width: 9%;
            background: rgb(130, 224, 255);
            border: none;
            padding: 10px;
        }

        #messages {
            margin: 0;
            height: 100%;
            overflow-y: auto;
            padding-bottom: 77px;
        }

        #messages li {
            padding: 5px 10px;
            word-break: break-all;
            word-wrap: break-word;
        }

        #messages li:nth-child(odd) {
            background: #eee;
        }

        #online {
            text-align: center;
        }

        #emojiBox {
            display: none;
            border: 2px solid;
            border-radius: 10px;
            width: 100%;
            height: 300px;
            overflow: hidden;
            overflow-y: auto;
            background-color: #fff;
            -moz-user-select: none;
            /*火狐*/
            -webkit-user-select: none;
            /*webkit浏览器*/
            -ms-user-select: none;
            /*IE10*/
            -khtml-user-select: none;
            /*早期浏览器*/
            user-select: none;
        }

        #emojiBox span {
            cursor: pointer;
            padding: 10px;
            font-size: 30px;
        }
    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <div class="flex container">
        <!-- 左侧人员列表 -->
        <div id="anonymousList">
            <h4 id="online">当前在线人数：0</h4>
            <ul id="concatenation"></ul>
        </div>
        <!-- 右侧内容区域 -->
        <div id="region">
            <!-- 消息列表 -->
            <ul id="messages"></ul>
            <!-- 输入框 -->
            <form action="">
                <div class="flex">
                    <img class="expression" src="/expression.png" alt="">
                    <input id="m" autocomplete="off" />
                    <button>发送</button>
                </div>
                <div id="emojiBox"></div>
            </form>
        </div>
    </div>
</body>

<script src="/socket.io/socket.io.js"></script>
<script>
    var once = false; // 加载历史记录 每个页面只走一次 后续别的用户连接不走历史记录
    var nickName = prompt("请输入昵称") || `匿名用户${new Date().getTime()}`
    var socket = io()

    // 发送昵称给后端
    socket.emit("join", nickName)

    //  收到服务器发来join事件
    socket.on("join", user => {
        addLine(user + " 加入了群聊")
    })
    socket.on("leave", user => {
        addLine(user + " 离开了群聊")
    })
    socket.on("updateConcatenation", list => {
        var concatenationHtml = ''
        list.map(item => {
            concatenationHtml += `<li>${item}</li>`
        })
        $("#concatenation").html(concatenationHtml)
    })

    // 接收消息
    socket.on("message", (msg, nickName) => {
        addLine(nickName + ': ' + msg)
    })

    document.title = nickName + "的聊天窗口"

    // 接收在线人数
    socket.on("population", total => {
        document.getElementById('online').innerText = "当前在线人数：" + total
    })

    // 接收历史消息
    socket.on("history", msgList => {
        if (once) return
        msgList.push('tips: 新进入用户只可读近期50条聊天记录')
        var HTML = '';
        msgList.map(item => {
            HTML += `<li>${item}</li>`
        })
        $("#messages").html(HTML)
        once = true
    })

    // 发送消息
    $("form").submit(function () {
        var msg = $("#m").val()
        if (!msg.replace(/\s/g, '')) {
            alert('请输入内容')
            return false
        }
        socket.emit("message", msg, nickName)
        $("#m").val("")
        return false
    })

    function addLine(msg) {
        $('#messages').append($('<li>').text(msg))
        // 让消息自动滚动
        $("#messages").scrollTop(document.getElementById('messages').scrollHeight)
    }
    // 刷新监听
    window.addEventListener("beforeunload", function (e) {
        socket.emit("downsizing", nickName)
    });
    window.removeEventListener('beforeunload', (e) => { })

</script>
<script src="/emoji.js"></script>
<script>
    var emojiHTML = '';
    emojiList.map(item => {
        emojiHTML += `<span>${item}</span>`
    })
    $("#emojiBox").html(emojiHTML)

    $('#emojiBox span').click(function () {
        $("#m").val(`${$("#m").val() + $($(this)).text()}`)
    })

    $(".expression").click(function () {
        $('#emojiBox').toggle()
        if ($('#emojiBox').is(":hidden")) {
            $('#messages').css("padding-bottom", "77px")
        } else {
            $('#messages').css("padding-bottom", "360px")
        }
        $("#messages").scrollTop(document.getElementById('messages').scrollHeight)
    })

    document.onkeydown = function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 27) {
            closeEmojiBox()
            $('#messages').css("padding-bottom", "77px")
        }
    };

    function closeEmojiBox() {
        $('#emojiBox').hide()
    }
</script>

</html>